
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../js/vue.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../../plugins/morris/morris.css">
    <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../../plugins/select2/select2.css">
    <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <title></title>
</head>
<body>
    <div id="app">
        <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"
                  @keyup.enter="handleSearch"></el-input>
        <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
            <el-option label="按书名搜索" value="book_name"></el-option>
            <el-option label="按书籍号搜索" value="bid"></el-option>
            <el-option label="按用户名搜索" value="username"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>

        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="text-center sorting">用户名</th>
                <th class="text-center sorting">书籍名</th>
                <th class="text-center sorting">书籍号</th>
                <th class="text-center sorting">预约日期</th>
                <th class="text-center sorting">截至日期</th>
                <th class="text-center sorting">操作</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(brand,index) in brands" v-if="brand.status===1">
                    <td class="text-center sorting">{{brand.username}}</td>
                    <td class="text-center sorting">{{brand.book_name}}</td>
                    <td class="text-center sorting">{{brand.bid}}</td>
                    <td class="text-center sorting">{{brand.begin_time}}</td>
                    <td class="text-center sorting">{{brand.end_time}}</td>
                    <td class="text-center sorting">
                        <el-button round type="primary"  v-on:click="comfirmbooks(brand.bid)">确认预约</el-button>
                        <el-button round type="danger"  v-on:click="cancel(brand.bid)">取消预约</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="box-footer">
            <div class="pull-left">
                <div class="form-group form-inline">
                    总共{{pages}} 页，共{{total}} 条数据。 每页
                    <select class="form-control" v-model="meiye">
                        <option>10</option>
                        <option>15</option>
                        <option>20</option>
                        <option>50</option>
                        <option>80</option>
                    </select> 条
                </div>
            </div>

            <div class="box-tools pull-right">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous" v-on:click="goPage(1)">首页</a>
                    </li>
                    <li><a href="#" v-on:click="goPage(pageNum-1==0?1:pageNum-1)">上一页</a></li>
                    <li v-for="index in (pages>=7)?(7):(pages)"
                        class="paginate_button">
                        <a href="#" @click="goPage(index)">{{index}}</a></li>
                    <li><a href="#" @click="goPage(pageNum+1>=pages?pages:pageNum+1)">下一页</a></li>

                </ul>
            </div>
        </div>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                brands:[],
                total: "",
                pages: "",
                pageNum: "",
                size: "",
                meiye:10,
                searchText:"",
                searchType:"",
            }
        },
        mounted(){
            this.findAll();
        },
        methods: {
            findAll(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/web/selectall3"
                }).then(function(resp){
                    _this.brands=resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            //确认预约
            comfirmbooks(bid){
                var _this=this;
                axios({
                    method:"post",
                    url:"/web/admin/comfirm",
                    data:"bid="+bid
                }).then(function(resp){
                    var i = resp.data;
                    if (i == 1) {//借书成功
                        _this.$message.success('借书成功！')
                        _this.findAll()
                    } else if (i == 0) {
                        _this.$message.error('借书失败！')
                    } else {
                        _this.$message.error('未知错误！')
                    }
                })
            },
            cancel(bid){
                var _this=this;
                axios({
                    method:"post",
                    url:"/web/admin/cancel",
                    data:"bid="+bid
                }).then(function(resp){
                    var i = resp.data;
                    if (i == 1) {//借书成功
                        _this.$message.success('取消预约成功！')
                        _this.findAll()
                    } else if (i == 0) {
                        _this.$message.error('取消预约失败！')
                    } else {
                        _this.$message.error('未知错误！')
                    }
                })
            },
            handleSearch(){
                var json={
                    "text":this.searchText,
                    "type":this.searchType
                };
                var jsonstr = JSON.stringify(json);
                var _this=this;
                axios({
                    method:"post",
                    url:"/web/admin/findAllBookreservation",//1111
                    data:jsonstr
                }).then(function(resp){
                    _this.brands=resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                var a={
                    "page":index,
                    "type":_this.searchType,
                    "text":_this.searchText
                }
                var s = JSON.stringify(a);
                // 页面加载完成后，发送异步请求，查询数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/web/selectall3",
                    data:s
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                var a={
                    "page":index,
                    "size":_this.meiye,
                    "type":_this.searchType,
                    "text":_this.searchText
                }
                var s = JSON.stringify(a);
                // 页面加载完成后，发送异步请求，查询数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/web/selectall3",
                    data:s
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },

        }
    })
</script>
</html>